<template>
  <div class="pages h5configuration">
    <div class="pageLevel" v-if="!sub">

      <div class="tableSearch">
        <el-form size="small">
          <el-form-item label="" label-width="0">
            <el-button type="primary" @click="routerAdd()">创建h5</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="tableMain">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
          <el-table-column prop="title" label="标题" align="center"></el-table-column>
          <el-table-column prop="checkedRecourceId" align="center" label="图例">
            <template slot-scope="scope">
              <img v-if="scope.row.checkedRecourceId=='0'" :src="templateOne" alt="" style="width:50px;height:50px">
              <img v-if="scope.row.checkedRecourceId=='1'" :src="templateTwo" alt="" style="width:50px;height:50px">
              <img v-if="scope.row.checkedRecourceId=='2'" :src="templateThree" alt="" style="width:50px;height:50px">
            </template>
          </el-table-column>
          <el-table-column prop="name" align="center" label="操作" width="180">
            <template slot-scope="scope">
              <el-button size="small" @click="routerEdit(scope.row.id)" type="text">修改</el-button>
              <el-button size="small" @click="deletes(scope.$index,scope.row)" type="text">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <page-unit :pageData="pageData" :func="configureList"></page-unit>
      </div>
    </div>
    <div class="pageLevel" v-else>
      <router-view></router-view>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import util from "@/util";
import { selectH5List, deleteH5 } from "@/api";
import templateOne from "@/assets/images/templateOne.png";
import templateTwo from "@/assets/images/templateTwo.png";
import templateThree from "@/assets/images/templateThree.png";
import pageUnit from "@/components/Page";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  components: { pageUnit },
  data() {
    return {
      templateOne,
      templateTwo,
      templateThree,
      tableData: [],
      pageData: {
        pageSize: 20,
        currentPage: 1,
        totalItems: 0,
        pageSizeArr: [5, 10, 20]
      }
    };
  },
  watch: {
    sub: {
      handler: function(val, oldVal) {
        if (oldVal != null && val == false) {
          this.configureList(this.pageData.pageSize, 1);
        }
      },
      deep: true
    }
  },
  mounted() {
    this.configureList(this.pageData.pageSize, 1);
  },
  methods: {
    routerAdd() {
      util.routerTo("/marketing-center/h5-configuration/h5-newlyadded");
    },
    routerEdit(h5Id = "") {
      util.routerTo("/marketing-center/h5-configuration/h5-edit", {
        h5Id: h5Id
      });
    },
    configureList(pageSize, pageNum) {
      let Data = {
        pageSize: pageSize,
        pageNum: pageNum,
        companyId: this.merchantId
      };
      selectH5List(Data).then(res => {
        this.tableData = res.data.list;
        this.pageData.totalItems = res.data.pageTotal;
      });
    },
    // 删除
    deletes(index, rows) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      })
        .then(() => {
          let data = {
            id: rows.id
          };
          deleteH5(data).then(res => {
            this.configureList(this.pageData.pageSize, 1);
            this.$message.success(res.msg);
          });
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    }
  }
};
</script>
